<template>
  <div>
    <MySearch :data="searchData" :defaulValue="defaulValue" @onSeatch="onSeatch" />
    <Grid>
      <template #toolbar-tools> </template>
    </Grid>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MySearch from '#/components/MySearch/index.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

const searchData = ref({
  top: {
    type: "INPUT",
    placeholder: "请输入商品名称或ID查询",
    name: "s0",
  },
  list: [
    {
      type: "SELECT",
      title: "自研落地页",
      placeholder: "请选择",
      name: "s1",
      options: [
        { value: 1, label: "已配置", },
        { value: 2, label: "未配置", },
      ]
    },
    {
      type: "INPUT",
      title: "创建人",
      placeholder: "请输入",
      name: "s2",
    },
    {
      type: "INPUT",
      title: "店铺名称",
      placeholder: "请输入",
      name: "s3",
    },
    {
      type: "INPUT",
      title: "链接域名",
      placeholder: "请输入",
      name: "s4",
    },
    {
      type: "INPUT",
      title: "类目",
      placeholder: "请输入",
      name: "s6",
    },
    {
      type: "INPUT",
      title: "备注",
      placeholder: "请输入",
      name: "s7",
    },
    {
      type: "SELECT",
      title: "商品链路",
      placeholder: "请选择",
      name: "s2",
      options: [
        { value: 1, label: "流量通", },
        { value: 2, label: "流量通RO", },
        { value: 3, label: "UD", },
        { value: 4, label: "UDSmart", },
        { value: 5, label: "新链路", },
      ]
    },
    {
      type: "INPUT",
      title: "运营人员",
      placeholder: "请输入",
      name: "s8",
    },
    {
      type: "DATERANGE",
      width: 340,
      title: "创建时间",
      name: "s10"
    }
  ]
})

const gridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '商品', type: 'c1', fixed: "left", width: 400 },
    { title: '回传方式', type: 'c3', width: 100 },
    { title: '盈亏成本', type: 'c4', width: 100 },
    { title: '盈亏ROI', type: 'c5', width: 100 },
    { title: '推广结束时间', type: 'c6', width: 100 },
    { title: '备用商品', type: 'c7', width: 100 },
    { title: '自研落地页', type: 'c8', width: 100 },
    { title: '拼团金额', type: 'c9', width: 100 },
    { title: '在投账户', type: 'c10', width: 100 },
    { title: '商品链接', type: 'c11', width: 100 },
    { title: '链接域名', type: 'c12', width: 100 },
    { title: '店铺', type: 'c13', width: 100 },
    { title: '类目', type: 'c14', width: 100 },
    { title: '运营人员', type: 'c15', width: 100 },
    { title: '备注', type: 'c16', width: 100 },
    { title: '创建人', type: 'c17', width: 100 },
    { title: '创建时间', type: 'c18', width: 100 },
  ],
  exportConfig: {},
  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getExampleTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});



const onSeatch = () => {
  // 
}

</script>


<style lang="scss" scoped></style>
